<style>
.active{
	color:#f49e10 !important;
}
.tabs-striped .tab-item.tab-item-active, .tabs-striped .tab-item.active, .tabs-striped .tab-item.activated {
    margin-top: -2px;
    border-style: solid;
    border-width: 2px 0 0 0;
    border-color: #F49E10;
}
</style>
<div class="tabs tabs-striped tabs-icon-top tabs-striped" style="border:none;display:none;position: fixed;xbottom: 0px;left: 0px;right: 0px;" id="footer">
	<a data-pjax href="{php echo $this->createMobileUrl('tasks')}" class="tab-item {if $_GPC['do'] == 'tasks'}active{/if}" id="footer_tasks" data-id="tasks">
		<i class="icon {if $_GPC['do'] == 'tasks'}ion-ios-bookmarks{else}ion-ios-bookmarks-outline{/if}"></i>
		<span>任务大厅</span>
	</a>
	<a data-pjax href="{php echo $this->createMobileUrl('post')}" class="tab-item {if $_GPC['do'] == 'post'}active{/if}" id="footer_post" data-id="post">
		<i class="icon {if $_GPC['do'] == 'post'}ion-ios-navigate{else}ion-ios-navigate-outline{/if}"></i>
		<span>我要送</span>
	</a>
	<a data-pjax href="{php echo $this->createMobileUrl('buy')}" class="tab-item {if $_GPC['do'] == 'buy'}active{/if}" id="footer_buy" data-id="buy">
		<i class="icon {if $_GPC['do'] == 'buy'}ion-ios-paper{else}ion-ios-paper-outline{/if}"></i>
		<span>我要买</span>
	</a>
	<a data-pjax href="{php echo $this->createMobileUrl('home')}" class="tab-item {if $_GPC['do'] == 'home'}active{/if}" id="footer_home" data-id="home">
		<i class="icon {if $_GPC['do'] == 'home'}ion-ios-person{else}ion-ios-person-outline{/if}"></i>
		<span>我</span>
	</a>
</div>

<script>
require(['jquery','core','pjax'],function($,core){
	
	var $scope = {};
	
	$scope.showTab1 = true;
	
	$scope.items = [
	    			{
	    				yes:'ion-ios-bookmarks',
	    				no:'ion-ios-bookmarks-outline',
	    				title:'任务大厅',
	    				badge:false,
	    				_do:'tasks',
	    				display: true,
	    				active: false,
	    				href: "{php echo $this->createMobileUrl('tasks')}",
	    				more:false
	    			},
	    			{
	    				yes:'ion-ios-navigate',
	    				no:'ion-ios-navigate-outline',
	    				title:'我要送',
	    				badge:false,
	    				_do:'post',
	    				display: true,
	    				active: false,
	    				href: "{php echo $this->createMobileUrl('post')}",
	    				more:false
	    			},
	    			{
	    				yes:'ion-ios-paper',
	    				no:'ion-ios-paper-outline',
	    				title:'我要买',
	    				badge:true,
	    				_do:'buy',
	    				display: true,
	    				active: false,
	    				href: "{php echo $this->createMobileUrl('buy')}",
	    				more:false
	    			},
	    			{
	    				yes:'ion-ios-person',
	    				no:'ion-ios-person-outline',
	    				title:'我',
	    				badge:false,
	    				_do:'home',
	    				display: true,
	    				active: false,
	    				href: "{php echo $this->createMobileUrl('home')}",
	    				more:false
	    			}
	    		];
	
	$('#footer .tab-item').click(function(){
		var _that,_this;
		var that_do = $('#footer .tab-item.active').data('id');
		var this_do = $(this).data('id');
		for (x in $scope.items){
			if($scope.items[x]._do == that_do){
				_that = $scope.items[x];
			}
			if($scope.items[x]._do == this_do){
				_this = $scope.items[x];
			}
		}
		
		if($('#footer .tab-item.active').length > 0){
			$('#footer .tab-item.active i').removeClass(_that.yes);
			$('#footer .tab-item.active i').addClass(_that.no);
			$('#footer .tab-item.active').removeClass('active');
		}
		var _do = $(this).data('id');
		if($("#footer #footer_"+_do).length>0){
			$("#footer #footer_"+_do).addClass('active');
			$("#footer #footer_"+_do).find('i').removeClass(_this.no);
			$("#footer #footer_"+_do).find('i').addClass(_this.yes);
		}
	});
	
	$scope.clickTab = function(_do){
		var vote_id = core.querystring('vote_id');
		var that_do = $('#footer .tab-item.active').data('id');
		var this_do = _do;
		for (x in $scope.items){
			if($scope.items[x]._do == that_do){
				_that = $scope.items[x];
			}
			if($scope.items[x]._do == this_do){
				_this = $scope.items[x];
			}
			if(vote_id){
				if(x>4){
					$('#footer #footer_' + $scope.items[x]._do).show();
					if($scope.items[x]._do != 'vote_more'){
						var url = $('#footer_'+$scope.items[x]._do).attr('href');
						var id = core.queryurl('vote_id',url);
						if(core.empty(id) || id != vote_id){
							$('#footer_'+ $scope.items[x]._do).attr('href',"" + $scope.items[x].href + "&vote_id="+core.querystring('vote_id'))
						}
					}
				}else{
					$('#footer #footer_' + $scope.items[x]._do).hide();
				}
			}else{
				if(x<=4){
					$('#footer #footer_' + $scope.items[x]._do).show();
				}else{
					$('#footer #footer_' + $scope.items[x]._do).hide();
				}
			}
		}
		if($('#footer .tab-item.active').length > 0){
			$('#footer .tab-item.active i').removeClass(_that.yes);
			$('#footer .tab-item.active i').addClass(_that.no);
			$('#footer .tab-item.active').removeClass('active');
		}
		if($("#footer #footer_"+_do).length>0){
			$("#footer #footer_"+_do).addClass('active');
			$("#footer #footer_"+_do).find('i').removeClass(_this.no);
			$("#footer #footer_"+_do).find('i').addClass(_this.yes);
		}
	}
	_do = core.querystring('do');
	$scope.clickTab(_do);
	
	$(document).on('pjax:send', function() {
		$("#pjax-container").empty();
		$("#pjax-container").html('');
		core.pjaxLoadding();
	}).on('pjax:end', function() {
		$('body').unbind('touchmove');
		if($('.weui_dialog').length > 0){
		  $('.weui_dialog').remove();
		}
	}).on('pjax:beforeReplace',function(contents, options){
		
	}).on('pjax:timeout', function(event) {
		event.preventDefault();
	}).on('pjax:complete', function(e,s) {
		var _do = core.querystring('do');
		core.pjaxloaded();
		$scope.clickTab(_do);
		$('#vote_more_list').hide();
	}).on('pjax:popstate',function(){
		var _do = core.querystring('do');
		$scope.clickTab(_do);
		clearInterval(timer);
		$('#vote_more_list').hide();
	});
	
	$(document).pjax('[data-pjax] a, a[data-pjax]', '#pjax-container',{
		timeout:1000,
		maxCacheLength:0
	});
	
	$(window).scroll(function(){
		if($(document).scrollTop() > 400){
			$('.gj-go-top').fadeIn();
		}else{
			$('.gj-go-top').fadeOut();
		}
	});
	
});
</script>